export default function wsjModal(opt) {
  /**
   * ===一个参数,对象形式===
   * @param {string} opt.content 必填 弹窗内容,html字符串
   * @param {function} opt.yesFn 选填 点击modal内容
   * @param {function} opt.cancelFn 选填 关闭按钮
   * ===两个参数===
   * @param {string} content 必填 弹窗内容
   * @param {function} cancelFn 选填 点击确定按钮的回调
   * @example
   * wsjModal({content:'哈哈哈'})
   * wsjModal('嘎嘎',()=>{})
   */
  var cfg = {
    content: '...',
    yesFn: null,
    cancelFn: null
  }
  //下方懒得做防呆判断
  if (arguments.length === 1) {
    if (typeof arguments[0] === 'string') {
      cfg.content = arguments[0]
    } else {
      cfg = { ...cfg, ...opt }
    }
  } else if (arguments.length === 2) {
    cfg.content = arguments[0]
    cfg.yesFn = arguments[1]
  } else {
    throw new Error('wsjModal参数数量错误')
  }

  var oDiv = document.createElement('div')
  var str = `<div class="wsj-modal-wrapper-mask" data-wsjmodal="mask">
  <div data-wsjmodal="content">${cfg.content}</div>
  <svg data-wsjmodal="ok" class="wsj-modal-close" fill="#fff" viewBox="0 0 1024 1024"><path d="M512 1024C228.072727 1024 0 795.927273 0 512S228.072727 0 512 0s512 228.072727 512 512-228.072727 512-512 512z m0-46.545455c256 0 465.454545-209.454545 465.454545-465.454545S768 46.545455 512 46.545455 46.545455 256 46.545455 512s209.454545 465.454545 465.454545 465.454545z m0-514.327272l148.945455-148.945455c13.963636-13.963636 34.909091-13.963636 48.872727 0 13.963636 13.963636 13.963636 34.909091 0 48.872727L560.872727 512l148.945455 148.945455c13.963636 13.963636 13.963636 34.909091 0 48.872727-13.963636 13.963636-34.909091 13.963636-48.872727 0L512 560.872727l-148.945455 148.945455c-13.963636 13.963636-34.909091 13.963636-48.872727 0-13.963636-13.963636-13.963636-34.909091 0-48.872727l148.945455-148.945455-148.945455-148.945455c-13.963636-13.963636-13.963636-34.909091 0-48.872727 13.963636-13.963636 34.909091-13.963636 48.872727 0l148.945455 148.945455z"></path></svg>
</div>
`
  oDiv.innerHTML = str
  document.body.appendChild(oDiv)
  oDiv.addEventListener('click', handleModalClick)
  function handleModalClick(e) {
    if (e.target.dataset.wsjmodal === 'ok' || e.target.dataset.wsjmodal === 'mask') {
      if (cfg.cancelFn === null) { shutDown() }
      if (typeof cfg.cancelFn === 'function') { cfg.cancelFn(); shutDown() }
      return
    }

    if (isClickModalContent(e.target)) {
      typeof cfg.yesFn === 'function' && cfg.yesFn()
      shutDown()
    }
    function isClickModalContent(e) {
      if (!e.tagName) { return false }
      if (e.getAttribute('data-wsjmodal') === 'content') {
        return true
      } else {
        return isClickModalContent(e.parentNode)
      }
    }
  }
  function shutDown() {
    oDiv.removeEventListener('click', handleModalClick)
    document.body.removeChild(oDiv)
  }
}
//wsjModal('<div style="background-color:#fff;">sadsadlorem  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nemo quo saepe odio expedita enim quasi, reprehenderit vitae recusprehen</div>',(s)=>{console.log('======123',123)})
